import { nextTick, ref } from 'vue'

interface UseCompositionOptions {
    afterComposition: (event: CompositionEvent) => void
    emit?: ((event: 'compositionstart', evt: CompositionEvent) => void) &
        ((event: 'compositionupdate', evt: CompositionEvent) => void) &
        ((event: 'compositionend', evt: CompositionEvent) => void)
}

export const isKorean = (text: string) => /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text)

export function useMessageInput({ afterComposition, emit,}: UseCompositionOptions) {
    const isComposing = ref(false)

    const handleCompositionStart = (event: CompositionEvent) => {
        emit?.('compositionstart', event)
        isComposing.value = true
    }

    const handleCompositionUpdate = (event: CompositionEvent) => {
        emit?.('compositionupdate', event)
        const text = (event.target as HTMLInputElement)?.textContent
        const lastCharacter = text || ''
        isComposing.value = !isKorean(lastCharacter)
    }

    const handleCompositionEnd = (event: CompositionEvent) => {
        emit?.('compositionend', event)
        if (isComposing.value) {
            isComposing.value = false
            nextTick(() => afterComposition(event))
        }
    }

    const handleComposition = (event: CompositionEvent) => {
        event.type === 'compositionend'
            ? handleCompositionEnd(event)
            : handleCompositionUpdate(event)
    }

    return {
        isComposing,
        handleComposition,
        handleCompositionStart,
        handleCompositionUpdate,
        handleCompositionEnd,
    }
}
